<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>铃木抽奖</title>
		<style type="text/css">
			/*字体滚动样式*/
			
			.pad_right {
				padding-right: 2em;
			}
			
			#scroll_div {
				overflow: hidden;
				white-space: nowrap;
				background: rgba(47, 79, 79, 0.4);
				line-height: 25px;
				color: white;
				font-size: 10px;
			}
			
			#scroll_begin,
			#scroll_end {
				display: inline;
			}
			/*标题*/
			
			.tp_title {
				background-image: url(img/biao1.png), url(img/biao2.png);
				background-repeat: no-repeat, no-repeat;
				margin-left: 6%;
				margin-right: 6%;
				background-size: 40px 40px, 40px 40px;
				background-position: left top, right bottom;
				margin-top: 30px;
				font-size: 50px;
				color: #FFD700;
				text-align: center;
				font-weight: normal;
			}
			/*规则字体*/
			
			.tp_rules {
				margin-top: 30px;
				font-size: 20px;
				color: #FFD700;
				text-align: center;
			}
			/*抽奖次数*/
			
			.tp_choices {
				font-size: 14px;
				color: white;
				text-align: center;
			}
			
			.tp_bt_history {
				background-image: url(img/more1.png), url(img/bt_bg.png);
				background-repeat: no-repeat, no-repeat;
				background-size: 15px 15px, cover;
				background-position: 90% 38%, center;
				margin-left: 30%;
				margin-top: 20px;
				margin-right: 30%;
				color: white;
				line-height: 35px;
				height: 40px;
				border-radius: 5px;
			}
			/* 大转盘样式 */
			
			.banner {
				background-image: url(img/xin1@2x.png), url(img/xin1@2x.png), url(img/xin2@2x.png), url(img/xin3@2x.png), url(img/xin4.png), url(img/xin5@2x.png), url(img/xin6@2x.png), url(img/xin7@2x.png);
				background-repeat: no-repeat;
				background-size: 22px 23px, 10px 10px, 20px 20px, 22px 20px, 20px 25px, 20px 24px, 20px 21px, 20px 23px;
				background-position: 15% 0.5%, 10% 0.5%, 9% 9%, 14% 98%, 95% 90%, 7% 88%, 95% 95%, 93% 12%;
				display: block;
				width: 95%;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 20px;
			}
			/*控制箭头*/
			
			.banner .turnplate {
				display: block;
				width: 80%;
				height: 80%;
				margin-left: 10%;
				margin-right: 10%;
				position: relative;
				background-image:url(img/zhuan_new_1.png);
				background-size:contain;
				background-position: center;
				background-repeat: no-repeat;
				background-clip: border-box;
			}
			/*控制容器*/
			/*.banner .turnplate canvas.item {
				width: 100%;
			}*/
			/*控制边框*/
			
			.banner .turnplate img.pointer {
				position: absolute;
				width: 34%;
				height: 40%;
				left: 34%;
				top: 28%;
			}
			
			.more {
				display: block;
				width: 100%;
				position: fixed;
				top: 0;
				left: 0;
				height: 150px;
			}
			
			.tp_divider {
				background-image: url(img/biao3.png);
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
				height: 10px;
			}
			
			.tp_activityDetail {
				background-image: url(img/xiang-1.png), url(img/xinxin.png), url(img/beibei.png);
				background-repeat: no-repeat, no-repeat, no-repeat;
				background-position: center 80px, 0px -5px, 0px 30px;
				padding: 12px;
				padding-top: 150px;
				margin: 12px;
				background-size: 100px 28px, 100px 100px, cover;
				padding-bottom: 20px;
			}
			
			.tp_footer {
				background-image: url(img/qianu.png), url(img/lili.png);
				background-repeat: no-repeat, no-repeat;
				background-position: left, right;
				background-size: contain, contain;
				height: 100px;
			}
			
			.tp_ad_item1 {
				background-image: url(img/x1.png);
				background-repeat: no-repeat;
				height: 40px;
				background-size: 40px 40px;
				line-height: 40px;
				padding-left: 50px;
				color: red;
			}
			
			.tp_ad_item2 {
				background-image: url(img/x2.png);
				background-repeat: no-repeat;
				height: 40px;
				background-size: 40px 40px;
				line-height: 40px;
				padding-left: 50px;
				margin-top: 30px;
				color: red;
			}
			
			.tp_ad_item3 {
				background-image: url(img/x3.png);
				background-repeat: no-repeat;
				height: 40px;
				background-size: 40px 40px;
				line-height: 40px;
				padding-left: 50px;
				margin-top: 30px;
				color: red;
			}
			
			.item {
				width: 90%;
				height: 90%;
				margin-left: 5%;
				margin-right: 5%;
			}
		</style>
		<!--<script type="text/javascript" src="js/jquery-1.10.2.js"></script>-->
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="js/awardRotate.js"></script>
		<script>
			//更改系统消息提醒
			window.alert = function(str, title) {
				var shield = document.createElement("DIV");
				shield.id = "shield";
				shield.style.position = "absolute";
				shield.style.left = "50%";
				shield.style.top = "50%";
				shield.style.width = "280px";
				shield.style.height = "150px";
				shield.style.marginLeft = "-140px";
				shield.style.marginTop = "-110px";
				shield.style.zIndex = "25";
				var alertFram = document.createElement("DIV");
				alertFram.id = "alertFram";
				alertFram.style.position = "absolute";
				alertFram.style.width = "280px";
				alertFram.style.height = "150px";
				alertFram.style.left = "50%";
				alertFram.style.top = "50%";
				alertFram.style.marginLeft = "-140px";
				alertFram.style.marginTop = "-110px";
				alertFram.style.textAlign = "center";
				alertFram.style.lineHeight = "150px";
				alertFram.style.zIndex = "300";
				strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
				strHtml += " <li style=\"background:orange;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\">[" + (title == undefined ? '中奖提醒' : title) + "]</li>\n";
				strHtml += " <li style=\"background:white;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\">" + str + "</li>\n";
				strHtml += " <li style=\"background:orange;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" style=\"width:80px;height:20px;background:#F0E68C;color:white;border:1px solid white;font-size:14px;line-height:16px;outline:none;margin-top: 4px\"/></li>\n";
				strHtml += "</ul>\n";
				alertFram.innerHTML = strHtml;
				document.body.appendChild(alertFram);
				document.body.appendChild(shield);
				this.doOk = function() {
					alertFram.style.display = "none";
					shield.style.display = "none";
				}
				alertFram.focus();
				document.body.onselectstart = function() {
					return false;
				};
			}
		</script>
		<script>
			var JSONDATA_tp = '{"msg":"请求成功!","code":"200","result":{"choice":"3","restaraunts":["碧根果一袋0", "年货红包1", "水果拼盘2", "300元月卡3", "2元现金红包4", "夏威夷果一袋5", "3元现金红包6", "松子一袋 7", "5元现金红包8"],"images":["images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png", "images/6.png", "images/5.png", "images/7.png", "images/5.png"],"tp_history":"恭喜793765***获得 50元巨人点卡奖励,恭喜793765***获得 50元巨人点卡奖励,恭喜793765***获得 50元巨人点卡奖励,恭喜793765***获得 50元巨人点卡奖励,恭喜793765***获得 50元巨人点卡奖励,恭喜793765***获得 50元巨人点卡奖励","colors":["#FFFFFF", "#5fcbd5", "#FFFFFF", "#5fcbd5", "#FFFFFF", "#5fcbd5", "#FFFFFF", "#5fcbd5", "#FFFF00"],"activity":"1.独在异乡为异客，每逢佳节倍思亲。 遥知兄弟登高处，遍插茱萸少一人。2.白日依山尽，黄河入海流。 欲穷千里目，更上一层楼。3.结庐在人境，而无车马喧。 　<br/>问君何能尔，心远地自偏。 　<br/>采菊东篱下，悠然见南山。 　<br/>山气日夕佳，飞鸟相与还。 　<br/>此中有真意，欲辩已忘言。"}}';
			var tp_data = JSON.parse(JSONDATA_tp);
			console.log(tp_data);
			//转盘 奖品数据
			var turnplate = {
				restaraunts: [], //大转盘奖品名称
				colors: [], //大转盘奖品区块对应背景颜色
				images: [], //图片
				outsideRadius: 175, //大转盘外圆的半径
				textRadius: 155, //大转盘奖品位置距离圆心的距离
				insideRadius: 68, //大转盘内圆的半径
				startAngle: 0, //开始角度
				bRotate: false, //false:停止;ture:旋转
				choices: 0
			};
			console.log("ready2==========");
			turnplate.restaraunts = tp_data.result.restaraunts;
			turnplate.images = tp_data.result.images;
			turnplate.colors = tp_data.result.colors;
			turnplate.choices = tp_data.result.choice;
			$(document).ready(function() {
				console.log("ready1==========");
				//超时执行方法
				var rotateTimeOut = function() {
					$('#wheelcanvas').rotate({
						angle: 0,
						animateTo: 2160,
						duration: 8000,
						callback: function() {
							alert('网络超时，请检查您的网络设置！');
						}
					});
				};
				//设置显示抽奖次数
				document.getElementById('tp_choice_num').innerText = turnplate.choices;
				//显示奖品图片
				var imgs_div = document.querySelectorAll('.img-jp');
				for(var i = 0; i < turnplate.images.length; i++) {
					imgs_div[i].src = turnplate.images[i];
				}
				//赋值活动详情 信息
				var items = document.querySelectorAll('.tp_ad_item');
				for(var i = 0; i < 3; i++) {
					if(i == 0) {
						items[0].innerText = (String(tp_data.result.activity).split('2.')[0]).replace('1.', "");
					}
					if(i == 1) {
						items[1].innerText = (String(tp_data.result.activity).split('2.')[1]).split('3.')[0];
					}
					if(i == 2) {
						items[2].innerText = (String(tp_data.result.activity).split('2.')[1]).split('3.')[1];
					}
				}
				//旋转转盘 item:奖品位置; txt：提示语;
				var rotateFn = function(item, txt) {
					var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
					if(angles < 270) {
						angles = 270 - angles;
					} else {
						angles = 360 - angles + 270;
					}
					$('#wheelcanvas').stopRotate();
					$('#wheelcanvas').rotate({
						angle: 0,
						animateTo: angles + 1800,
						duration: 8000,
						callback: function() { //回调
							turnplate.bRotate = false;
							alert('恭喜中奖了' + txt);

						}
					});
				};
				//指针点击事件
				$('.pointer').click(function() {
					console.log(turnplate.bRotate);
					//转动的时候点击无效果
					if(turnplate.bRotate) return;
					//没有抽奖次数了
					if(turnplate.choices <= 0) {
						alert("您已经没有抽奖机会了!", "提示")
						return;
					}
					turnplate.choices--;

					turnplate.bRotate = !turnplate.bRotate;
					//请求服务器 点击后获取中奖 物品

					document.getElementById('tp_choice_num').innerText = turnplate.choices;

					//旋转 直到服务器返回 响应
					$('#wheelcanvas').rotate({
						angle: 0,
						animateTo: 180000,
						duration: 3000
					});
					var JSOND = '{"msg": "请求成功!","code": "200","result": {"choice": "1","Prize": "1"}}';
					var temp_result = JSON.parse(JSOND);
					console.log(temp_result);
					//获取随机数(奖品个数范围内)
					var item = temp_result.result.Prize;
					turnplate.choices = temp_result.result.choice;
					console.log(item);
					console.log(turnplate.restaraunts[item - 1]);
					setTimeout(function() {
						rotateFn(item, turnplate.restaraunts[item - 1]);

						document.getElementById('tp_choice_num').innerText = turnplate.choices;
					}, 2000);
					console.log(item);
				});

			});
			//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
			window.onload = function() {
				drawRouletteWheel();

				//指针指向线边
				(function() {
					$('#wheelcanvas').rotate({
						angle: 0,
						animateTo: 269,
						duration: 10
					});
				})();
			};
			//画俄罗斯大转盘
			function drawRouletteWheel() {
				var canvas = document.getElementById("wheelcanvas");
				var imgs_div = document.querySelectorAll('.img-jp');
				if(canvas.getContext) {
					//根据奖品个数 计算圆周角度
					var arc = Math.PI / (turnplate.restaraunts.length / 2);
					var ctx = canvas.getContext("2d");
					//在给定矩形内清空一个矩形
					ctx.clearRect(0, 0, 420, 420);
					//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
					ctx.strokeStyle = "#FFBE04";
					//font 属性设置或返回画布上文本内容的当前字体属性
					ctx.font = 'bold 16px Microsoft YaHei';
					for(var i = 0; i < turnplate.restaraunts.length; i++) {
						var angle = turnplate.startAngle + i * arc;
						ctx.fillStyle = turnplate.colors[i];
						ctx.beginPath();
						//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
						ctx.arc(210, 210, turnplate.outsideRadius, angle, angle + arc, false);
						ctx.arc(210, 210, turnplate.insideRadius, angle + arc, angle, true);
						ctx.stroke();
						ctx.fill();
						//锁画布(为了保存之前的画布状态)
						ctx.save();

						//改变画布文字颜色
						var b = i + 2;
						if(b % 2) {
							ctx.fillStyle = "#FFFFFF";
						} else {
							ctx.fillStyle = "#E5302F";
						};

						//----绘制奖品开始----

						var text = turnplate.restaraunts[i];
						var line_height = 17;
						//translate方法重新映射画布上的 (0,0) 位置
						ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);

						//rotate方法旋转当前的绘图
						ctx.rotate(angle + arc / 2 + Math.PI / 2);

						/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
						if(text.indexOf("盘") > 0) { //判断字符进行换行
							var texts = text.split("盘");
							for(var j = 0; j < texts.length; j++) {
								ctx.font = j == 0 ? 'bold 20px Microsoft YaHei' : 'bold 18px Microsoft YaHei';
								if(j == 0) {
									ctx.fillText(texts[j] + "盘", -ctx.measureText(texts[j] + "盘").width / 2, j * line_height);
								} else {
									ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height * 1.2); //调整行间距
								}
							}
						} else if(text.indexOf("盘") == -1 && text.length > 8) { //奖品名称长度超过一定范围
							text = text.substring(0, 8) + "||" + text.substring(8);
							var texts = text.split("||");
							for(var j = 0; j < texts.length; j++) {
								ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
							}
						} else {

							//在画布上绘制填色的文本。文本的默认颜色是黑色

							//measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
							ctx.fillText(text, -ctx.measureText(text).width / 2, line_height);
						}

						//添加对应图标
						//此处 适用于 奖品图片不特殊 大小拆不多 时
						if(String(imgs_div[i].src).indexOf("no-img") == -1) {
							//此处 适用于 奖品图片不特殊 大小拆不多 时
							imgs_div[i].onload = function() { //只要有一张图片未加载 出来 全部重新来过
								console.log("load====" + imgs_div[i]);
								drawRouletteWheel();
							};
							console.log(turnplate.restaraunts.length);
							console.log(turnplate.restaraunts.length <= 7);
							//-40 + (14 - turnplate.restaraunts.length), 20 + (14 - turnplate.restaraunts.length)
							if(turnplate.restaraunts.length <= 5)
								ctx.drawImage(imgs_div[i], -(45 - 4 * (turnplate.restaraunts.length - 2)), 20, 7 * (15 - turnplate.restaraunts.length), 5 * (15 - turnplate.restaraunts.length));
							else
								ctx.drawImage(imgs_div[i], -(49 - 4 * (turnplate.restaraunts.length - 2)), 25, 7 * (15 - turnplate.restaraunts.length), 5 * (15 - turnplate.restaraunts.length));
							//				if(turnplate.restaraunts.length <= 7) {
							//					ctx.drawImage(imgs_div[i], -40 + (14 - turnplate.restaraunts.length), 20 + (14 - turnplate.restaraunts.length), 7 * (14 - turnplate.restaraunts.length), 4 * (14 - turnplate.restaraunts.length));
							//				} else if(turnplate.restaraunts.length > 7 && turnplate.restaraunts.length < 9) {
							//					ctx.drawImage(imgs_div[i], -25, 30, 56, 32);
							//				} else {
							//					ctx.drawImage(imgs_div[i], -23, 30, 49, 28);
							//				}

						}
						//把当前画布返回（调整）到上一个save()状态之前
						ctx.restore();
						//----绘制奖品结束----
					}
				}
			};
		</script>
	</head>

	<body style="background: #db4243;padding: 0px;margin: 0px;">
		<!--滚动文字条-->
		<div id="scroll_div" class="fl">
			<div id="scroll_begin">
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
				<span class="pad_right">恭喜793765***获得 50元巨人点卡奖励</span>
			</div>
			<div id="scroll_end"></div>
		</div>
		<!--标题-->
		<div class="tp_title">
			幸运大转盘
		</div>
		<!--奖品图标 默认设置了图片-->
		<div id="tp_imgs">
			<img class="img-jp" src="images/1.png" id="shan-img" style="display:none;" />
			<img class="img-jp" src="images/1.png" id="diy1-img" style="display:none;" />
			<img class="img-jp" src="images/2.png" id="diy2-img" style="display:none;" />
			<img class="img-jp" src="images/3.png" id="diy3-img" style="display:none;" />
			<img class="img-jp" src="images/4.png" id="diy4-img" style="display:none;" />
			<img class="img-jp" src="images/5.png" id="diy5-img" style="display:none;" />
			<img class="img-jp" src="images/6.png" id="diy6-img" style="display:none;" />
			<img class="img-jp" src="images/7.png" id="diy7-img" style="display:none;" />
			<img class="img-jp" src="images/7.png" id="diy8-img" style="display:none;" />
			<img class="img-jp" src="images/7.png" id="diy9-img" style="display:none;" />
		</div>
		<!--俄罗斯大转盘-->
		<div class="banner" style="margin-top: 5%">
			<div class="turnplate" style="text-align: center;">
				<canvas class="item" id="wheelcanvas" width="420px" height="420px"></canvas>
				<img class="pointer" src="img/jt2.png" />
			</div>
		</div>
		<div style="height: 30px;width: 100%;text-align: center;">
			<div style="background: url(img/yuanyin.png);background-size: contain;height: 30px;background-repeat: no-repeat;margin-left: 20%;margin-right: 20%;"></div>
		</div>
		<!--活动规则-->
		<div class="tp_rules">
			活动规则
		</div>
		<div class="tp_divider"></div>
		<!--抽奖机会-->
		<div class="tp_choices">
			您还有<span id="tp_choice_num" class="tp_rules">1</span>次抽奖机会
		</div>
		<div style="text-align: center;" align="center">
			<div class="tp_bt_history">
				我的中奖记录
			</div>
		</div>

		<div class="tp_activityDetail">
			<div>
				<div class="tp_ad_item1">礼包一</div>
				<div class="tp_ad_item" style="text-indent: 25px;padding-left: 3px;">
				</div>
			</div>
			<div>
				<div class="tp_ad_item2">礼包二</div>
				<div class="tp_ad_item" style="text-indent: 25px;padding-left: 3px;">
				</div>
			</div>
			<div>
				<div class="tp_ad_item3">礼包三</div>
				<div class="tp_ad_item" style="text-indent: 25px;padding-left: 3px;">
				</div>
			</div>
		</div>
		<div class="tp_footer">

		</div>

	</body>
	<script>
		//文字横向滚动
		function ScrollImgLeft() {
			var speed = 50;
			var MyMar = null;
			var scroll_begin = document.getElementById("scroll_begin");
			var scroll_end = document.getElementById("scroll_end");
			var scroll_div = document.getElementById("scroll_div");
			scroll_end.innerHTML = scroll_begin.innerHTML;

			function Marquee() {
				if(scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
					scroll_div.scrollLeft -= scroll_begin.offsetWidth;
				else
					scroll_div.scrollLeft++;
			}
			MyMar = setInterval(Marquee, speed);
			scroll_div.onmouseover = function() {　　　　　　　
				clearInterval(MyMar);　　　　　
			}　　　　
			scroll_div.onmouseout = function() {　　　　　　　
				MyMar = setInterval(Marquee, speed);　　　　　　　　　
			}
		}
		ScrollImgLeft();
	</script>

</html>